Introduction to Web Development using HTML 5
By: Kris Jamsa, Ph.D.

Chapter 21: Introducing the HTML 5 Canvas

This chapter will introduce you to working with the HTML canvas. By the time you finish, you will understand the following key concepts:

● How to use the canvas for dynamic content
● How to test if a browser supports canvas operations
● How to create a canvas using the <canvas> and </canvas> tag pair
● How to position a drawing point and draw lines on the canvas using the moveTo and lineTo functions
● How to scale the canvas using the onmouseover and onmouseout event
● How to draw a square or rectangle using the rect function
● How to draw circles and arcs using the arc function
● How to integrate photos into the canvas
● How to display text within the canvas
● How to draw curved lines within the canvas

Chapter PowerPoint Presentation


TestCanvas.html
DisplayCanvas.html
TwoCanvas.html
CanvasLine.html
DrawSquare.html
ThickStar.html
FillStar.html
ScaleCanvas.html
DrawRects.html
CirclesAndArcs.html
CanvasEllipse.html
ScreenSaver.html
HelloCanvas.html
CurvedLines.html